<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>轮播图示例</title>
    <style>
      .carousel {
        position: relative;
        max-width: 800px;
        margin: 20px auto;
        overflow: hidden;
      }

      .slides-container {
        display: flex;
        transition: transform 0.5s ease-in-out;
      }

      .slide {
        min-width: 100%;
        height: 400px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        color: white;
      }

      .controls {
        position: absolute;
        top: 50%;
        width: 100%;
        display: flex;
        justify-content: space-between;
        transform: translateY(-50%);
      }

      .prev-btn,
      .next-btn {
        background: rgba(0, 0, 0, 0.5);
        color: white;
        border: none;
        padding: 15px;
        cursor: pointer;
        font-size: 18px;
      }

      .indicators {
        position: absolute;
        bottom: 20px;
        width: 100%;
        display: flex;
        justify-content: center;
        gap: 10px;
      }

      .indicator {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.5);
        border: none;
        cursor: pointer;
      }

      .indicator.active {
        background: yellow;
      }
      .title {
        text-align: center;
        font-size: 24px;
        font-weight: bold;
        margin-bottom: 20px;
      }
    </style>
  </head>
  <body>
    <div class="carousel">
      <h1 class="title">随机轮播图</h1>
      <div class="box">
        <div class="slides-container">
          <img class="slide" src="img/img_01.png" alt="" />
        </div>

        <div class="controls">
          <button class="prev-btn">❮</button>
          <button class="next-btn">❯</button>
        </div>

        <div class="indicators">
          <button class="indicator"></button>
          <button class="indicator"></button>
          <button class="indicator"></button>
        </div>
      </div>
    </div>

    <script>
      const arrList = [
        {
          src: "img/img_01.png",
          alt: "图片1",
          backgroundColor: "red",
        },
        {
          src: "img/img_02.png",
          alt: "图片2",
          backgroundColor: "blue",
        },
        {
          src: "img/img_03.png",
          alt: "图片3",
          backgroundColor: "green",
        },
      ];
      //-------------- 刷新重新生成图片---------------
      let randomIndex = Math.floor(Math.random() * arrList.length);
      // 获取元素
      const img = document.querySelector(".slides-container img");
      // 获取body
      const body = document.body;
      const title = document.querySelector(".title");
      function updateInfo() {
        img.src = arrList[randomIndex].src;
        title.innerHTML = arrList[randomIndex].alt;
        body.style.backgroundColor = arrList[randomIndex].backgroundColor;
        // 获取原点
        // const domList = document.querySelectorAll(".indicator");
        // domList[randomIndex].classList.add("active");
        document
          .querySelector(".indicators .active")
          ?.classList.remove("active");
        dom = document.querySelector(
          `.indicators button:nth-child(${randomIndex + 1})`
        );
        dom.classList.add("active");
      }
      updateInfo();
      // ---------------自动下一张 第一种---------------
      function autoNext() {
        randomIndex++;
        if (randomIndex >= arrList.length) {
          randomIndex = 0;
        }
        updateInfo();
      }

      let timer = setInterval(autoNext, 1000);

      // ---------------鼠标经过时停止轮播---------------
      let box = document.querySelector(".box");
      // 鼠标经过时停止自己轮播
      box.addEventListener("mouseenter", () => {
        clearInterval(timer);
      });
      // 鼠标离开时继续轮播
      // ---------------自动下一张 第二种---------------
      box.addEventListener("mouseleave", () => {
        // 好习惯先关再开 
        clearInterval(timer);
        timer = setInterval(() => {
          // 自动调用点击事件
          nextBtn.click();
        }, 1000);
      });
      // ---------------点击左右按钮---------------
      const prevBtn = document.querySelector(".prev-btn");
      const nextBtn = document.querySelector(".next-btn");
      prevBtn.addEventListener("click", () => {
        randomIndex--;
        if (randomIndex < 0) {
          randomIndex = arrList.length - 1;
        }
        updateInfo();
      });
      nextBtn.addEventListener("click", () => {
        randomIndex++;
        if (randomIndex >= arrList.length) {
          randomIndex = 0;
        }
        updateInfo();
      });
      // ---------------点击小圆点---------------
      const indicators = document.querySelectorAll(".indicator");
      indicators.forEach((item, index) => {
        // 给每个小圆点添加点击事件
        item.addEventListener("click", () => {
          randomIndex = index;
          updateInfo();
        });
      });
    </script>
  </body>
</html>
